<div class="containerStyle">
  <h3>描述</h3>
  <p>表格列固定 + 表头锁定特性 + 列拖动特性 + 分页特性</p>
  <p class="demo-text-warn">注意：使用 pagination 组件，请导入 TiPaginationModule</p>
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns" tiColsResizable>
    <!--.ti3-table-fixed-head是表头的容器，它的子元素中的table(thead)是实际显示的表头-->
    <!--注意:此处一定要使用.ti3-table-fixed-head样式类-->
    <div class="ti3-table-fixed-head">
      <table>
        <thead>
          <tr>
            <th *ngFor="let column of columns;" [tiColumnFixed]="column.fixed" tiOverflow width="{{column.width}}">{{column.title}}</th>
          </tr>
        </thead>
      </table>
    </div>
    <!--.ti3-table-container是表体的容器，它的子元素中的table的thead是用来控制各列宽度，实际不显示；tbody是实际显示的表体-->
    <!--注意1:此处一定要使用.ti3-table-container样式类-->
    <!--注意2:用户在有.ti3-table-container样式类的容器上来设置表体的高度或最大高度-->
    <div class="ti3-table-container ti3-resize-wrapper" style="max-height: 300px">
      <table>
        <thead>
          <tr>
            <th *ngFor="let column of columns;" width="{{column.width}}"></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let row of displayed;index as i">
            <td tiColumnFixed="left" tiOverflow>{{row.firstName}}</td>
            <td tiColumnFixed="left" tiOverflow>{{row.lastName}}</td>
            <td tiColumnFixed="left" tiOverflow>{{row.age}}</td>
            <td tiOverflow>{{row.balance}}</td>
            <td tiOverflow>{{row.email}}</td>
            <td tiOverflow>{{row.address}}</td>
            <td tiOverflow>{{row.phone}}</td>
            <td tiOverflow>{{row.parents}}</td>
            <td tiColumnFixed="right" tiOverflow>{{row.school}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <ti-pagination [(currentPage)]="currentPage" [pageSize]="pageSize" [(totalNumber)]="totalNumber"> </ti-pagination>
  </ti-table>
</div>
